<template>
	<div class="check-listset">
		<div class="mb-10">
			<van-field
				label="类别"
				class="input_text"
				value="风险位置"
				readonly
				:border="false"
			/>
			<van-field
				label="检查区域"
				class="input_text"
				:value="form.CheckArea"
				readonly
				:border="false"
			/>
		</div>

		<div class="det_tab_item">
			<div class="operate_det">
				<div class="mb-10 checklist-title">
					检查表列表<span @click="chooseTask()">检查表</span>
				</div>
				<div class="operate_list">
					<van-row class="operate_row_first">
						<van-col span="4">#</van-col>
						<van-col offset="1" span="10">检查表名称</van-col>
					</van-row>

					<van-row class="operate_row" v-for="(v, i) in Details3" :key="i">
						<van-col span="24">
							<van-row>
								<van-col span="4"> {{ i + 1 }} </van-col>
								<van-col span="20">
									<div>{{ v }}</div>
								</van-col>
							</van-row>

							<van-row class="mt-10">
								<van-col offset="6" span="18">
									<van-row>
										<van-col offset="9" span="5">
											<div @click="up(i)">
												<img
													class="operation-imgs"
													src="@/assets/Images/AppIcon/icon_list_up.png"
												/>上移
											</div>
										</van-col>
										<van-col span="5">
											<div @click="down(i)">
												<img
													class="operation-imgs"
													src="@/assets/Images/AppIcon/icon_list_down.png"
												/>下移
											</div>
										</van-col>
										<van-col span="5">
											<div @click="del(i)">
												<img
													class="operation-imgs"
													src="@/assets/Images/AppIcon/icon_list_delete.png"
												/>删除
											</div>
										</van-col>
									</van-row>
								</van-col>
							</van-row>
						</van-col>
					</van-row>
				</div>
			</div>
		</div>
		<div style="padding: 10px">
			<van-button type="primary" style="width: 100%" @click="save"
				>确定</van-button
			>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			form: {},
			Details3: [],
			TCodes: '',
			TNames: '',
			idx: '',
			path:''
		}
	},
	activated() {
		console.log(this.$route.params, 'dsssaaaaaaaaaaaaaadssssssssss')
		if (this.$route.params.item) {
			this.form = this.$route.params.item
			if (this.$route.params.item.TNames) {
				this.Details3 = this.$route.params.item.TNames.split(',')
				this.TCodes = this.$route.params.item.TCodes.split(',')
			}
			this.path = this.$route.params.path
			this.idx = this.$route.params.idx
		}
		if (this.$route.params.TCodes) {
			this.TCodes = this.TCodes.concat(this.$route.params.TCodes.split(','))
			this.TNames = this.$route.params.TNames
			this.Details3 = this.Details3.concat(this.$route.params.TNames.split(','))
		}
	},
	methods: {
		// 确认,回到上一页
		save() {
			const data = {
				Details3: this.Details3,
				idx: this.idx,
				TCodes: this.TCodes,
			}
			this.$router.push({
				name: this.path,
				params: {
					data: data,
				},
			})
		},
		// 选择检查表
		chooseTask() {
			this.$router.push({
				path: '/Danger/ChooseMyCheckList',
				query: { name: 'MyCheckListSet' },
			})
		},
		/* 上移 */
		up(index) {
			if (this.Details3.length > 1 && index !== 0) {
				this.Details3 = this.swapItems(this.Details3, index, index - 1)
			}
		},
		// 下移
		down(index) {
			if (this.Details3.length > 1 && index !== this.Details3.length - 1) {
				this.Details3 = this.swapItems(this.Details3, index, index + 1)
			}
		},
		swapItems(arr, index1, index2) {
			arr[index1] = arr.splice(index2, 1, arr[index1])[0]
			return arr
		},
		// 删除
		del(index) {
			
			if(Array.isArray(this.TCodes)){
				this.TCodes.splice(index, 1)
			}else {
				this.TCodes = this.TCodes.split(',')
				this.TCodes.splice(index, 1)
			}
			this.Details3.splice(index, 1)
		},
	},
}
</script>

<style lang="less" scoped>
.check-listset {
	background-color: #e8f1f8;
	min-height: 100vh;
}
.det_tab_item {
	padding: 10px 0;
	background-color: #fff;
	border-radius: 5px;
	margin-bottom: 10px;

	.det_tab_item_text {
		padding: 0 10px;
	}
}
.checklist-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	span {
		font-size: 14px;
		color: rgb(0, 92, 128);
	}
}
.operate_det {
	background-color: #fff;
	padding: 10px;
	.operate_list {
		font-size: 12px;
		border: 1px solid #e8f1f8;
		.operate_row_first {
			padding: 10px;
			background-color: #e8f1f8;
			border-bottom: 1px solid #e8f1f8;
			margin-bottom: 10px;
		}
		.operate_row {
			padding: 10px;
			border-bottom: 1px solid #e8f1f8;
			/*margin-bottom: 10px;*/
		}
	}
}
.operation-imgs {
	width: 15px;
	height: 15px;
	vertical-align: middle;
	margin-right: 5px;
}
</style>